<template>
	<div>
		<h2>
			{{msg}}	
		</h2>
		<br>
		<h3>{{count}}</h3>
		<p>
			<button @click="$store.commit('add',10)">+</button>
			<button @click="reduce">-</button>
			<h3>233</h3>
		</p>
		<p>
			<button @click="addAction">+</button>
			<button @click="reduceAction">-</button>
			<h3>233</h3>
		</p>
	</div>
</template>

<script>
	import store from '@/vuex/store';
	import { mapState, mapMutations, mapGetters,mapActions } from 'vuex';
	export default {
		data() {
			return {
				msg: 'Hellow Vuex'
			}
		},
		computed: {
			...mapState(['count']),
			//			count(){
			//				return this.$store.getters.count;
			//			}
			//			...mapGetters(['count'])
		},
		methods: {
			...mapMutations(['add', 'reduce']),
			...mapActions(['addAction','reduceAction'])
		},
		store
	}
</script>

<style>

</style>